<template>
    <el-card style="width: 450px; position: relative; height: 500px; overflow-y: scroll;">
        <template #header>
            <div class="card-header" style="position: relative;">
              <span>排污单位列表</span>
              <span @click="closeCompany" style="position: absolute; right: 0; top: 0; cursor: pointer">X</span>
            </div>
        </template>
        <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
        >
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            > 
                Check all
            </el-checkbox>
        <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
            <el-checkbox label="正常" value="0" />
            <el-checkbox label="异常" value="1" />
            <el-checkbox label="超标" value="2" />
            <el-checkbox label="掉线" value="3" />
            <el-checkbox label="停运" value="4" />
        </el-checkbox-group>
        <div class="search" style="display: flex; justify-content: space-between;">
            <el-input style="width: 70%;" placeholder="请输入公司名称" v-model="comName" ></el-input><el-button @click="search">搜索</el-button>
        </div>
        <el-tab-pane label="全部" name="first" style="width: 100%;">
            <div v-for="item  in comData" :key="item.comName" style="display: flex; justify-content: space-between;margin-bottom: 10px; margin-top: 10px; width: 100%">
                <span style="width: 50%;">{{item.comName}}</span>
                <span style="color: rgb(107, 107, 248);">{{item.comImportance==1?'[重点]':''}}</span>
                <el-tag :type="types[item.comState]">
                    {{status[item.comState]}}
                </el-tag>
            </div>
        </el-tab-pane>
        <el-tab-pane label="重点" name="second" style="width: 100%;">
            <div v-for="item  in comData" :key="item.comName" style="display: flex; justify-content: space-between;margin-bottom: 10px; margin-top: 10px; width: 100%;">
            <span style="width: 50%;">{{item.comName}}</span>
            <span style="color: rgb(107, 107, 248);">{{item.comImportance==1?'[重点]':''}}</span>
            <el-tag :type="types[item.comState]">
                {{status[item.comState]}}
            </el-tag>
            </div>
        </el-tab-pane>
        <el-tab-pane label="非重点" name="third" style="width: 100%;">
            <div v-for="item  in comData" :key="item.comName" style="display: flex; justify-content: space-between;margin-bottom: 10px; margin-top: 10px; width: 100%;">
                <span style="width: 50%;">{{item.comName}}</span>
                <span style="color: rgb(107, 107, 248);">{{item.comImportance==1?'[重点]':''}}</span>
                <el-tag :type="types[item.comState]">
                    {{status[item.comState]}}
                </el-tag>
                </div>
        </el-tab-pane>
        </el-tabs>
    </el-card>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import Pagination from './Pagination.vue'
import http from '../http/http'
const emits = defineEmits(["closeCompany",'update'])
let closeCompany = ()=>{
  emits("closeCompany")
}

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab.index)
  if(tab.index == '1'){
    importance.value = 1
  }else if(tab.index == '2'){
    importance.value = 0
  }else{
    importance.value = ''
  }
  search()
}
let checkList = ref()
const checkAll = ref(false)
const isIndeterminate = ref(false)
const options = ['0','1','2','3','4']
let importance = ref()
const handleCheckAllChange = (val: boolean) => {
    checkList.value = val ? options : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === options.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < options.length
}
let comName = ref()
let types = ['primary','warning','danger','info','success']
let status = ['正常','异常','超标','掉线','停运']
let comData = ref()
http.get('/api/company/list',{
    params:{
        importance: '',
        stateList: '',
        comName: ''
    }
}).then((res)=>{
    comData.value = res.data.records
})
let search = ()=>{
    http.get('/api/company/list',{
    params:{
        importance: importance.value,
        stateList: checkList.value?.join(','),
        comName: comName.value
    }
}).then((res)=>{
    comData.value = res.data.records
    emits("update",comData.value)
})
}
</script>
<style scoped>
    ::v-deep .el-tab-pane{
        width: 200px;
    }
</style>